<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算任意区间内连续自然数的累加和</title>
    <style type="text/css">
        .main {
            width: 500px;
            margin: auto;
            text-align: center;
            border: #002C00 5px solid;
            box-shadow: 0 0 0 5px #008000;
        }

        .button {
            margin: 5px 15px 0 0;
        }
    </style>
</head>
<body>
<div class="main">
    <h2>计算任意区间内连续自然数的累加和</h2>
    <h3>定义区间</h3>
    <strong>起始数：</strong><input id="start" type="text"/><strong>终止数：</strong><input id="end" type="text"/>
    <br>
    <strong>累加和：</strong><input disabled id="sum" type="text"/>
    <br>
    <button class="button" id="calculator" onclick="calculator()" type="button">计算</button>
    <button class="button" id="reset" onclick="reset()" type="button">清空</button>
</div>
</body>
<script type="text/javascript">
    function calculator() {
        let start = document.getElementById("start").value;
        let end = document.getElementById("end").value;
        console.log()
        if (start === "" || end === "") {
            alert("请输入数据！")
        }
        start = Number(start)
        end = Number(end)
        if (start > end) {
            alert("起始值必须小于终止值！")
        }
        let sum = 0
        for (let i = start; i <= end; i++) {
            sum += i;
        }
        document.getElementById("sum").value = sum
    }

    function reset() {
        document.getElementById("start").value = "";
        document.getElementById("end").value = "";
        document.getElementById("sum").value = "";
    }
</script>
</html>